<template>
	<view>
		<uni-nav-bar statusBar :title="title" :border='false' color="#fff" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<view class="flex-row-flex-start">
					<view class="flex-column-center">
						<u-icon name="map" color="#fff" size="18"></u-icon>
						<text class="city">郑州</text>
					</view>
					<view class="topTitle">
						欢迎来到企大咖
					</view>

				</view>
			</block>
		</uni-nav-bar>





		<image src="/static/index/top.png" mode="widthFix" style="width: 100%;margin-top: -100rpx;"></image>
		<view class="" style="position: relative;margin-top: -300rpx">
			<view class="searchView">

			</view>
			<view class="contentTop flex-row-flex-start" :class="['contentTop'+topIndex]">
				<view @click="navItemClick(index)" class="navItem flex-column-center" v-for="(item,index) in navList"
					:key="index">
					<image class="navIcon" :src="item.icon" mode=""></image>
					<view class="navTitle">
						{{item.text}}
					</view>
				</view>
			</view>
			<view class="content">
				<view class="" style="margin: 0 20rpx;">
					<swiper-grid :data="serviceCategoryList" :rows="2" :cols="4" @itemClick="handleGridClick" />
				</view>

			</view>
		</view>
		<view class="flex-row-flex-start" style="margin: 20rpx;margin-top: 40rpx;">
			<image class="news" src="/static/index/news.png" mode=""></image>
			<view class="newsTitle">
				恭喜
				<text class="baseColor">[m**]</text>
				与<text class="baseColor">13:41</text>签订了“网站建设”订单
			</view>
		</view>
		<view class="" style="margin: 20rpx;">
			<image src="/static/index/top.png" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="indexLine">

		</view>
		<!-- <view class="flex-row-space-between" style="height: 78rpx;margin: 0 51rpx;">
			<view class="menuTitle1 baseColor">
				任务推荐
			</view>
			<view class="menuTitle flex-row-flex-start">
				行业分类
				<u-icon style="margin-left: 10rpx;" name="arrow-down-fill" color="#0E0C09" size="10"></u-icon>
			</view>
			<view class="menuTitle flex-row-flex-start">
				筛选
					<u-icon style="margin-left: 10rpx;" name="arrow-down-fill" color="#0E0C09" size="10"></u-icon>
			</view>
		</view> -->
		<view class="indexLine">

		</view>
		<view v-if="role==1||role==0" @click="productClick(item)" v-for="(item,index) in productList" :key="index">
			<view v-if="index" class="line" >
			
			</view>
			<view class="product flex-row-space-between">
				<image class="productImage" :src="item.productPhoto" mode="aspectFill"></image>
				<view class="flex1">
					<view class="productName overflow1">
						{{item.productName}}
					</view>
					<view class="productNum">
						成交 {{item.productTurnover||'0'}}  |  服务评分 5.00
					</view>
					<view class="productPrice">
						￥{{item.productPrice}}
					</view>
					<view  class="line" style="margin: 14rpx 0;" >
					
					</view>
					<view class="flex-row-space-between">
						<view class="flex-row-flex-start">
							<image class="productHead" src="/static/my/head.png" mode=""></image>
							<view class="shopName">
								{{item.serviceName}}
							</view>
						</view>
						<view class="shopName">
							{{item.shopAddress}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="role==2||role==3" v-for="(item,index) in list" :key="index">
			<view v-if="index" class="line" style="margin: 0 50rpx;">

			</view>
			<view class="item">
				<view class="flex-row-flex-start">
					<view class="type">
						招标
					</view>
					<view class="name">
						{{item.taskName}}
					</view>
				</view>
				<view class="flex-row-flex-start" style="margin-top: 20rpx;">
					<view class="flex-row-flex-start">
						<image class="icon" src="/static/index/icon.png" mode=""></image>
						<view class="nickname">
							{{item.createBy}}
						</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 20rpx;">
						<image class="icon" src="/static/index/icon1.png" mode=""></image>
						<view class="nickname">
							{{item.serviceName}}
						</view>
					</view>
					<view class="flex-row-flex-start" style="margin-left: 20rpx;">
						<image class="icon" src="/static/index/icon2.png" mode=""></image>
						<view class="nickname">
							¥{{item.taskPrice}}
						</view>
					</view>
				</view>
				<view class="flex-row-flex-start" style="margin-top: 20rpx;">
					<image class="icon" src="/static/index/icon3.png" mode=""></image>
					<view class="nickname">
						{{item.taskDateStart}} ~ {{item.taskDateEnd}}
					</view>
				</view>
			</view>

		</view>


		<!-- <cc-nav-swiper :list="cateNavs" :rowCount="2" :columnCount="4"  @itemClick="itemClick"></cc-nav-swiper> -->
		<tabbar index="0"></tabbar>
	</view>
</template>

<script>
	import swiperGrid from '@/components/swiper-grid/swiper-grid.vue';
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		t_taskList,
		getServiceList,
		t_productList
	} from '@/api/index.js'
	export default {
		components: {
			swiperGrid
		},
		computed: {

		},
		data() {
			return {
				role:0,
				productList:[],
				serviceCategoryList: [],
				topIndex: 0,
				navList: [{
					icon: '/static/index/nav1.png',
					text: '设计开发',
					url: '/pages/menu',
					serviceCategory: 1,
				}, {
					icon: '/static/index/nav2.png',
					text: '影视服务',
					url: '/pages/menu',
					serviceCategory: 2,
				}, {
					icon: '/static/index/nav3.png',
					text: '广告制作',
					url: '/pages/menu',
					serviceCategory: 3,
				}, {
					icon: '/static/index/nav4.png',
					text: '企业服务',
					url: '/pages/menu',
					serviceCategory: 4,
				}, ],
				gridData: [{
						icon: '/static/index/1.png',
						text: 'APP开发',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/2.png',
						text: '微信小程序',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/3.png',
						text: '网站开发',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/4.png',
						text: '软件开发',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/5.png',
						text: '脚本制作',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/6.png',
						text: '插件开发',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/7.png',
						text: '程序开发',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/8.png',
						text: '模板建站',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/9.png',
						text: '数据库设计',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/10.png',
						text: '公众号开发',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/11.png',
						text: '二次开发',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/12.png',
						text: '网页UI设计',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/13.png',
						text: '移动UI设计',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/14.png',
						text: '产品原型设计',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/15.png',
						text: '软件界面设计',
						url: '/pages/menu'
					},
					{
						icon: '/static/index/16.png',
						text: '电商设计',
						url: '/pages/menu'
					}
				],
				list: [],
				title: "",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#00000030"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			uni.hideTabBar()
			//1客户 2店长 3员工
			this.role=uni.getStorageSync('role')
			if(this.role==1||this.role==0){
				this.t_productList()
			}
			if(this.role==2||this.role==3){
				this.loadData()
			}
			this.getServiceList()
			
			
		},
		onLoad(e) {

		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},

		methods: {
			productClick(item){
				uni.navigateTo({
					url:'/pages/index/product/product?id='+item.id
				})
			},
			t_productList() {

				var data = {}
				t_productList(data).then(res => {
					this.productList = res.rows
				})
			},
			getServiceList() {
				var data = {
					serviceCategory: this.navList[this.topIndex].serviceCategory
				}
				getServiceList(data).then(res => {
					this.serviceCategoryList = res.data
				})
			},
			navItemClick(index) {
				this.topIndex = index
				this.getServiceList()
			},
			loadData() {

				var data = {}
				t_taskList(data).then(res => {
					this.list = res.rows
				})
			},


		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 300rpx;
		// background-color: #F6F6F6;
		background-color: #FFF;
	}

	.city {
		font-weight: 500;
		font-size: 18rpx;
		color: #FEFEFE;
	}

	.topTitle {
		margin-left: 20rpx;
		font-weight: 500;
		font-size: 48rpx;
		color: #FFFFFF;
	}

	.searchView {
		margin: 30rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
	}

	.content {

		// position: relative;
		width: 100%;
		// margin: 0 20rpx;
		padding-top: 100rpx;
		margin-top: -120rpx;
		// height: 443rpx;
		background: #FFFFFF;
		box-shadow: -4rpx 3rpx 24rpx 0rpx rgba(12, 15, 33, 0.15);
		z-index: 1;
	}

	.contentTop {
		padding: 0 20rpx;
		position: relative;
		margin: 30rpx;
		margin-top: 120rpx;
		height: 182rpx;

		background-size: 100% 100%;
		z-index: 2;
	}

	.contentTop0 {
		background-image: url('../../static/index/content.png');
	}

	.contentTop1 {
		background-image: url('../../static/index/content1.png');
	}

	.contentTop2 {
		background-image: url('../../static/index/content2.png');
	}

	.contentTop3 {
		background-image: url('../../static/index/content3.png');
	}

	.navItem {
		width: 25%;
	}

	.navIcon {
		margin-top: -14rpx;
		width: 68rpx;
		height: 68rpx;
	}

	.navTitle {
		margin-top: 4rpx;
		font-size: 21rpx;
		color: #FFFFFF;
	}

	.news {
		margin-left: 32rpx;
		margin-right: 46rpx;
		width: 88rpx;
		height: 56rpx;
	}

	.newsTitle {
		font-weight: 400;
		font-size: 24rpx;
		color: #535353;
	}

	.indexLine {
		width: 100%;
		height: 5rpx;
		background: #F6F6F6;
	}

	.menuTitle {
		font-weight: 400;
		font-size: 28rpx;
		color: #16130D;
	}

	.menuTitle1 {
		font-weight: 400;
		font-size: 28rpx;
	}

	.item {
		margin: 30rpx 50rpx;
	}

	.type {
		padding: 1rpx 10rpx;
		background: #ED6F1A;
		border-radius: 4rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
	}

	.name {
		margin-left: 10rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #707070;
	}

	.icon {
		margin-right: 14rpx;
		width: 17rpx;
		height: 19rpx;
	}

	.nickname {
		font-weight: 400;
		font-size: 24rpx;
		color: #707070;
	}
	.product{
		padding: 20rpx;
	}
	.productImage{
		width: 232rpx;
		height: 232rpx;
		border-radius: 8rpx;
		margin-right: 30rpx;
		background-color: #F6F6F6;
	}
	.productName{
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}
	.productNum{
		margin-top: 14rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #A4A4A4;
	}
	.productPrice{
		margin-top: 14rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #ED6F1A;
	}
	.productHead{
		width: 42rpx;
		height: 42rpx;
		border-radius: 21rpx;
	}
	.shopName{
		margin-left: 6rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
	}
	
</style>